
<template>
  <el-checkbox
        v-model="isAllSelected"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
        style="margin-right: 30px;"
      >
        全选
  </el-checkbox>
  <el-checkbox-group
    v-model="selectedValues"
    @change="handleCheckedChange"
  >
    <el-checkbox v-for="dict in options" :key="dict.value" :label="dict.label" :value="dict.value">
      {{ dict.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

defineComponent({
  name: 'MyCheckBox'
})
const emit = defineEmits(['update:modelValue'])

const props= defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  option:  {
    type: Array,
    required: true
  },
})
// ========== 上传相关 ==========
const selectedValues:any = ref(props.modelValue)
const options:any = ref(props.option)
//全选
const isAllSelected = computed({
      get: () => selectedValues.value.length === options.value.length,
      set: (value) => {
        if (value) {
          selectedValues.value = options.value.map(option => option.value);
        } else {
          selectedValues.value = [];
        }
      }
    });
const isIndeterminate = computed(() => selectedValues.value.length > 0 && selectedValues.value.length < options.value.length);

watch(()=>props.modelValue,()=>{
  selectedValues.value = props.modelValue
})// const isIndeterminate = ref(false)
const handleCheckAllChange = (val: boolean,) => {
  isAllSelected.value = val;
  // selectedValues.value = val ? options.value.map(item=>item.value) : []
  // isIndeterminate.value = false
  emit('update:modelValue',selectedValues.value )
}
const handleCheckedChange = (value: string[]) => {
  isAllSelected.value = value.length === options.value.length;
  selectedValues.value = value
  // const checkedCount = value?value.length:0
  // isAllSelected.value = checkedCount === options.value.length
  // isIndeterminate.value = checkedCount > 0 && checkedCount < options.value.length
  emit('update:modelValue',selectedValues.value )
}
</script>


<style scoped lang="scss">
.card-title{
  width: 100%;
  height: 27px;
  display: flex;
  align-items: center;
  .title-div {
      border-width: 0px;
      width: 9px;
      height: 27px;
      background: inherit;
      background-color: rgba(24, 144, 255, 1);
      border: none;
      border-radius: 0px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      margin-right: 5px;
  }
  .title{
    white-space: nowrap;
    display: flex;
    align-items: center;
  }
}
</style>
